<html><body><style>.custom-scrollbar{
  display:flex;
  width:250px;
  height:250px;
  overflow:auto;
}
.custom-scrollbar::-webkit-scrollbar {
  width: 28px;
  height:28px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background-color:#f00;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track-piece {
  background-color:#12f;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 1px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color:#000;
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
.custom-scrollbar::-webkit-scrollbar-button {
  width:30px;
  double:true;
  background-color:#0f0;
  border-radius: 10px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
/*.custom-scrollbar::-webkit-scrollbar-track-piece:start {
  border-radius: 1px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}*/
.custom-scrollbar::-webkit-scrollbar-button:double-button {
  display:none;  
}
.custom-scrollbar::-webkit-scrollbar-corner {
  display:none;  
}
</style><div class="custom-scrollbar">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?</p>
</div></body></html>